<template>
  <el-main>
    <header>
      <el-row :gutter="20">
        <el-col :span="2">
          <div class="">
            <span>设备编号:</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="">
            <el-input v-model="innerCode" placeholder="请输入"></el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="">
            <el-button @click="searchFn" type="primary" icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="14">
          <div class=""></div>
        </el-col>
      </el-row>
    </header>
    <main>
      <div class="top"></div>
      <div class="middle">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="no" label="序号"> </el-table-column>
            <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
            <el-table-column prop="typeName" label="设备型号"> </el-table-column>
            <el-table-column prop="nodeName" label="详细地址"> </el-table-column>
            <el-table-column prop="vmStatus" label="运营状态"> </el-table-column>
            <el-table-column label="设备状态" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" :class="{ btnOff: true, btnOn: scope.row.status.status1 }" round>离线</el-button>
                <el-button size="mini" :class="{ btnOff: true, btnOn: scope.row.status.status2 }" round>货道</el-button>
                <el-button size="mini" :class="{ btnOff: true, btnOn: scope.row.status.status3 }" round>传动轴</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作">
              <template slot-scope="scope">
                <el-button @click="getDetails(scope.row.innerCode)" type="text">查看详情</el-button>
                <el-dialog class="dialogDetails" title="设备详情" :visible.sync="dialogDetails" width="35%" :modal-append-to-body="false">
                  <div style="width: 579px; margin: 0px auto">
                    <div class="detailsTop">
                      <el-row>
                        <el-col :span="6">
                          <span>销售量：</span><span class="active">{{ details.salesAmount }}个</span>
                        </el-col>
                        <el-col :span="6">
                          <span>销售额：</span><span class="active">{{ details.salesForehead }}万元</span>
                        </el-col>
                        <el-col :span="6">
                          <span>补货次数：</span><span class="active">{{ details.replenishment }}次</span>
                        </el-col>
                        <el-col :span="6">
                          <span>维修次数：</span><span class="active">{{ details.maintenance }}次</span>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="detailsCentre">商品销量（月）</div>
                    <div class="detailsBottom">
                      <el-col v-for="(item, index) in details.skuCollect" :key="index" :span="6">
                        <div class="monthly_sales">
                          <span>{{ item.skuName }}</span>
                          <div></div>
                          <span class="right">：{{ item.count }}</span>
                        </div>
                      </el-col>
                    </div>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="bottom">
        <span>共{{ search.totalCount }}条记录 第 {{ search.pageIndex }}/{{ search.totalPage }} 页</span>
        <el-button @click="onPage" :disabled="getSearchObj.pageIndex === 1">上一页</el-button>
        <el-button @click="bownPage" :disabled="getSearchObj.pageIndex == search.totalPage">下一页</el-button>
      </div>
    </main>
  </el-main>
</template>

<script>
import { getSearch, getOrderCount, getOrderAmount, getSupplyCount, getRepairCount, getSkuCollect } from '@/api/equipment'
export default {
  data () {
    return {
      getSearchObj: {
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      search: {},
      innerCode: '',
      dialogDetails: false,
      details: {}
    }
  },
  created () {
    this.getSearch(this.getSearchObj)
  },
  methods: {
    async getSearch (getSearchObj) {
      const search = await getSearch(getSearchObj)
      this.search = search
      search.currentPageRecords.forEach((item, index) => {
        this.tableData.push({
          no: search.pageIndex * 10 - 9 + index,
          innerCode: item.innerCode,
          typeName: item.type.name,
          nodeName: item.node.name,
          vmStatus: item.vmStatus === 0 ? '未投放' : item.vmStatus === 1 ? '运营' : '撤机',
          status: {
            status1: item.status[10001],
            status2: item.status[10002],
            status3: item.status[10003]
          }
        })
      })
    },
    async onPage () {
      this.getSearchObj.pageIndex--
      this.tableData = []
      this.getSearch(this.getSearchObj)
    },
    async bownPage () {
      this.getSearchObj.pageIndex++
      this.tableData = []
      this.getSearch(this.getSearchObj)
    },
    async searchFn () {
      const searchFnObj = this.getSearchObj
      this.$set(searchFnObj, 'innerCode', this.innerCode)
      this.tableData = []
      this.getSearch(searchFnObj)
    },
    async getDetails (innerCode) {
      this.dialogDetails = true
      const detailsObj = {
        start: `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-01 00:00:00`,
        end: `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-${new Date().getDate()} 23:59:59`,
        innerCode: innerCode
      }
      const DetailsObj = {
        start: `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-01`,
        end: `${new Date().getFullYear()}-${new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)}-${new Date().getDate()}`,
        innerCode: innerCode
      }
      const salesAmount = await getOrderCount(detailsObj)
      const salesForehead = await getOrderAmount(detailsObj)
      const replenishment = await getSupplyCount(DetailsObj)
      const maintenance = await getRepairCount(DetailsObj)
      const skuCollect = await getSkuCollect(DetailsObj)
      const details = {
        salesAmount: salesAmount,
        salesForehead: (salesForehead / 1000000).toFixed(2),
        replenishment: replenishment,
        maintenance: maintenance,
        skuCollect: skuCollect
      }
      details.skuCollect.forEach(item => {
        console.log(1)
        item.skuName = item.skuName.length > 4 ? item.skuName[0] + item.skuName[1] + item.skuName[2] + item.skuName[3] + '…' : item.skuName
      })
      this.details = details
      console.log(this.details)
    }
  }
}
</script>

<style lang="less" scoped>
.el-main {
  background-color: RGB(248, 250, 253);
  width: 89vw;
  height: 100%;
  header {
    background-color: #fff;
    height: 64px;
    margin-bottom: 20px;
    span {
      line-height: 64px;
      margin-left: 20px;
    }
    .el-input {
      margin-top: 12px;
    }
    button {
      background-color: RGB(95, 132, 255);
      margin-top: 10px;
    }
  }
  main {
    background-color: #fff;
    padding: 20px 15px 19px 17px;
    .middle {
      /deep/ td {
        border-bottom: 0px solid #ebeef5;
      }
      /deep/ th {
        background-color: RGB(243, 246, 251);
        font-weight: 400;
        color: #333;
      }
      .btnOff {
        background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
        border: none;
        color: #fff;
      }
      .btnOn {
        background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
        border: none;
        color: #fff;
      }
      /deep/ .dialogDetails {
        .el-dialog {
          border-radius: 10px;
          height: 335px;
          .el-dialog__header {
            .el-dialog__title {
              font-weight: 600 !important;
            }
          }
          .detailsTop {
            height: 54px;
            background: rgba(227, 233, 245, 0.39);
            text-align: center;
            .el-col-6 {
              span {
                line-height: 54px;
              }
              .active {
                color: #5f84ff;
              }
            }
          }
          .detailsCentre {
            margin: 20px 0 12px 6px;
          }
          .detailsBottom {
            .monthly_sales {
              padding: 0 10px;
              line-height: 40px;
              height: 40px;
              border: 1px solid #d8dde3;
              display: flex;
              div {
                flex: 1;
              }
              .right {
                width: 39px;
              }
            }
          }
        }
      }
    }
    .bottom {
      padding: 32px 16px;
      display: flex;
      span {
        flex: 1;
        font-size: 16px;
        color: #dbdfe5;
      }
      button {
        border: none;
        background-color: #d5ddf8;
      }
    }
  }
}
</style>
